export default {
  data() {
    return {
      tabMapOptions: [{
        label: '新建',
        key: '1',
        component: 'add',
        isEdit: false, // 当前页面是否是编辑页面
        flag: false // 当前页面是否是复制页面
      }, {
        label: '列表',
        key: '2',
        component: 'list',
        isEdit: false
      }],
      newLabelName: '编辑',
      activeName: '1', // 当前显示的tab名称，用于绑定el-tabs
      defaultLength: 2, // tab初始化长度
      tabLength: 2, // 当前显示的tab长度，默认初始值为2
      id: '', // 资讯ID
      refresh: false, // 控制列表页初始化时是否需要刷新
      queryData: {}
    }
  },
  watch: {
    activeName(val) {
      if (+val < 2) {
        this.id = ''
      }
      const query = JSON.parse(JSON.stringify(this.$route.query))
      const params = (Object.assign(this.queryData, query, {
        tab: val,
        id: this.id
      }))
      this.$router.push({
        path: this.$route.path,
        query: params
      })
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 刷新后初始化页面
    init() {
      // 获取初始化页面需要展示的tab索引
      const tab = this.$route.query.tab
      // 默认前两个索引正常展示
      if (tab && +tab <= this.defaultLength) {
        this.activeName = tab
      } else if (this.$route.query.id && this.$route.query.id !== 'undefined') {
        this.addTab(this.$route.query.id)
      } else {
        this.id = ''
        this.activeName = '1'
      }
    },

    // 增加
    addTab(data, flag) {
      let id
      if (typeof data === 'object') {
        id = data.id
        this.queryData = data
      } else {
        id = data
      }
      this.tabLength = this.tabLength + 1
      const newTabName = this.tabLength.toString()
      this.tabMapOptions.push({
        label: this.newLabelName,
        key: newTabName,
        component: 'add',
        isEdit: true,
        flag
      })
      this.id = id
      this.activeName = newTabName
    },

    /**
     * 删除
     * @param {targetName} 当前标签
     * @param {name} 目标标签
     */
    removeTab(targetName, name) {
      // 判断为tagname为1 发布页面的时候，发布后自动跳转至2 列表页面
      // console.log('targetName', targetName, this.defaultLength)
      if (+targetName <= this.defaultLength) {
        this.activeName = name || '1'
        this.refresh = true
        this.$nextTick(() => {
          this.refresh = false
        })
        return
      }
      const tabMapOptions = this.tabMapOptions
      let activeName = this.activeName
      // 删除后跳转
      if (name) {
        activeName = name
        this.refresh = true
        this.$nextTick(() => {
          this.refresh = false
        })
      } else if (+activeName === +targetName) {
        tabMapOptions.forEach((tab, index) => {
          if (tab.key === targetName) {
            const nextTab = tabMapOptions[index + 1] || tabMapOptions[index - 1]
            if (nextTab) {
              activeName = nextTab.key
            }
          }
        })
      }
      if (+activeName <= this.defaultLength) {
        this.id = ''
      }
      this.activeName = activeName
      this.tabMapOptions = tabMapOptions.filter(tab => tab.key !== targetName)
      this.queryData.re = 1
    }
  }
}
